<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>17_文档_增删改</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }
    
    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 10px;
        background: blue;
    }
    
    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        /*top: 50px;*/
        background: red;
    }
    
    .div3 {
        position: absolute;
        top: 250px;
    }
</style>

<body>
    <ul id="ul1">
        <li>AAAAA</li>

        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>

        <li title="hello">DDDDDD</li>
        <li title="two">EEEEE</li>
        <li>FFFFF</li>
    </ul>
    <br>
    <br>
    <ul id="ul2">
        <li>aaa</li>
        <li title="hello">bbb</li>
        <li class="box">ccc</li>
        <li title="hello">ddd</li>
        <li title="two">eee</li>
    </ul>

    <!--
1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素
-->
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
           需求:
           1. 向id为ul1的ul下添加一个span(最后)
           2. 向id为ul1的ul下添加一个span(最前)
           3. 在id为ul1的ul下的li(title为hello)的前面添加span
           4. 在id为ul1的ul下的li(title为hello)的后面添加span
           5. 将在id为ul2的ul下的li(title为hello)全部替换为p
           6. 移除id为ul2的ul下的所有li
           */
    </script>
</body>

</html>